<template>
  <div class="card">
    <div class="card-header pb-0">
      <div class="d-flex align-items-center table-responsive" style="text-align: center;
        vertical-align:text-top;">
        <h6 class="mb-0"></h6>
        <argon-signup-button color="primary" size="sm" @click="viewAll" v-if="searchChartFlag == 1">View all</argon-signup-button>
        <router-link  v-else :to="{
                      name:'createfacility',
                      params:{
                      ifcreate:1,
                      id:'',
                      f_name:'',
                      location:'',
                      price:null,
                      available_time:'',
                      img:''
                      },
                    }">
            <argon-signup-button color="primary" size="sm" variant="" v-if="flag==0">Create</argon-signup-button >
        </router-link>
        <div class=" d-flex align-items-center table-responsive" style="">
          <div class="input-group">
            <el-select v-model="type" placeholder="Type" @change="changetype(type)">
              <el-option label="Facility" value="Facility"></el-option>
              <el-option label="Class" value="Class"></el-option>
            </el-select>
          </div>
        </div>  
        <div class=" d-flex align-items-center table-responsive" style="">
          <div class="input-group">
              <el-input v-if="select == ''"
                disabled
                v-model="searchInput"
                placeholder="Please input"
                class="input-with-select"
              >
                <template #prepend>
                  <el-select v-model="select" placeholder="Key" style="width: 115px">
                    <el-option label="Name" value="1" />
                    <el-option label="Facility" value="2" />
                    <el-option label="Time" value="3"/>
                  </el-select>
                </template>
                <template #append>
                  <span class="input-group-text text-body" @click="searchBy">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </template>
              </el-input>
              <el-input v-else-if="select != 3"
                v-model="searchInput"
                placeholder="Please input"
                class="input-with-select"
              >
                <template #prepend>
                  <el-select v-model="select" placeholder="Search type" style="width: 115px">
                    <el-option label="Name" value="1" />
                    <el-option label="Facility" value="2" />
                    <el-option label="Time" value="3" />
                  </el-select>
                </template>
                <template #append>
                  <span class="input-group-text text-body" @click="searchBy">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </template>
              </el-input>
              <div v-else-if="select == 3"
                class="input-with-select"
              >
                <el-select v-model="select" placeholder="Search type" style="width: 115px">
                    <el-option label="Name" value="1" />
                    <el-option label="Facility" value="2" />
                    <el-option label="Time" value="3" />
                </el-select>
                <el-select v-model="dateSelect">
                  <el-option v-for="date in date_list" :key="date" :value="date" :label="date" />
                </el-select>
                <el-select v-model="timeSelect">
                  <el-option v-for="time in time_select_list" :key="time" :value="time" :label="time" />
                </el-select>
                <span @click="searchBy" type="border: none">
                  <i class="fas fa-search" aria-hidden="true"></i>
                </span>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
              >Price</th>
              <th
                class="text-uppercase text-xs text-center font-weight-bold mb-0 opacity-7 "
              >Position</th>
              <th
                class="text-uppercase text-xs text-center font-weight-bold mb-0 opacity-7 "
              >Capacity</th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >Available Time</th>
              <th class="text-secondary opacity-7"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(fitem,index) in facility_list" :key="fitem">
              <td>
                <div class="d-flex px-2 py-1">
                  <div>
                    <!-- 本地项目用上面的，服务器端用下面的 -->
                    <!-- <img
                      :src="require('@/assets/img/'+ fitem.img)"
                      class="avatar avatar-xl me-3"
                      alt="user6"
                    /> -->
                    <img
                      :src="'./img/'+ fitem.img"
                      class="avatar avatar-xl me-3"
                      alt="user6"
                    />
                  
                  </div>
                  <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">{{fitem.f_name}}</h6>
                  </div>
                </div>
              </td>
              <td>
                <p class="text-xs font-weight-bold mb-0">{{"$"+ fitem.price}}/h</p>
              </td>
              <td>
                <p class="text-xs text-center font-weight-bold mb-0">{{fitem.location}}</p>
              </td>
              <td>
                <p class="text-xs text-center font-weight-bold mb-0">{{fitem.capacity}}</p>
              </td>
              <td class="align-middle text-center">
                <span class="text-secondary text-xs font-weight-bold">
                  <div class="dropdown">
                  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                    Available time
                  </button>
                  <form class="dropdown-menu" style="width:176px;">
                    <div :id="'carouselExample'+ fitem.id" class="carousel slide ">
                      <div class="carousel-inner text-center">
                        
                          <!-- 1 -->
                          <div class="carousel-item active">
                            <table class="table">
                              <thead>
                                <tr>
                                  <td>{{first_date}}</td> 
                                </tr>
                                <tr v-for="time in time_list[0+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}} &nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}} &nbsp;&nbsp;&nbsp;{{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </thead>
                            </table>
                          </div>
                          <!-- 2 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[1]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[1+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}} &nbsp;&nbsp;&nbsp;{{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!-- 3 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[2]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[2+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!-- 4 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[3]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[3+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!-- 5 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[4]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[4+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!-- 6 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[5]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[5+index*7]" :key="time">
                                  <td v-if="time.capacity==0" class="table-success">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!-- 7 -->
                          <div class="carousel-item">
                            <table class="table">
                              <tbody>
                                <tr>
                                  <td>{{date_list[6]}}</td> 
                                </tr>
                                <tr v-for="time in time_list[6+index*7]" :key="time">
                                  <td v-if="time.capacity<fitem.capacity" class="table-success">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                  <td v-else class="table-danger">{{time.time}}&nbsp;&nbsp;&nbsp; {{ time.capacity }}/{{ fitem.capacity }}</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        
                      </div>
                      <a class="carousel-control-prev btn" type="button" :data-bs-target="'#carouselExample'+fitem.id" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="false"></span>
                        <span class="visually-hidden">Previous</span>
                      </a>
                      <a class="carousel-control-next btn" type="button" :data-bs-target="'#carouselExample'+fitem.id" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                      </a>
                    </div>
                  </form>
                </div>
                </span>
              </td>
              <td class="align-middle" v-if="flag==0">
                <router-link :to="{
                    name:'createfacility',
                    params:{
                    ifcreate:0,
                    id:fitem.id,
                    f_name:fitem.f_name,
                    location:fitem.location,
                    price:fitem.price,
                    img:fitem.img,
                    capacity:fitem.capacity
                    },
                  }"><a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
                      <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit
                    </a>
                  </router-link>
                  <a class="btn btn-link text-danger text-gradient px-3 mb-0" @click="deleteFacility(fitem.id)">
                    <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
                  </a>
              </td>
            </tr> 
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import ArgonSignupButton from "@/components/ArgonSignupButton.vue";
import {ElSelect, ElOption } from 'element-plus'
import {ElInput} from 'element-plus'

export default {
  name: "authors-table",
  components:{
    ArgonSignupButton,
    ElOption,
    ElSelect,
    ElInput,
    
  },
  data(){
    return{
      flag:'',
      nowtime:0,
      test: require('../../assets/img/logo.png'),
      facility_list:[],
      searchInput:'',
      searchChartFlag:0,
      search_list:[],
      date_list:[],
      time_list:[],
      time_select_list:[
        '9:00-10:00',
        '10:00-11:00',
        '11:00-12:00',
        '12:00-13:00',
        '13:00-14:00',
        '14:00-15:00',
        '15:00-16:00',
        '16:00-17:00',
        '17:00-18:00',
        '18:00-19:00',
      ],
      first_date:'',
      select:'',
      type:'Facility',
      timeSelect:'',
      dateSelect:'',
    }
  
  },
  mounted() {
    this.flag = sessionStorage.getItem("LOGINFLAG")
    axios
    .get('https://fitzone.work:8080/all')
    .then(res =>{
      console.log(res);
      this.facility_list = res.data;
    })
    .catch(err =>{
      console.error(err);
    })
    this.test = sessionStorage.getItem("userIdentity");
    axios
    .get('https://fitzone.work:8080/date')
    .then(res => {
      console.log(res.data)
      this.date_list = res.data
      this.first_date = this.date_list[0]
    })
    axios
    .get('https://fitzone.work:8080/detail_time')
    .then(res => {
      console.log(res.data)
      this.time_list = res.data
    })
  },
  methods:{
    deleteFacility(id){
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/delete_facility',
        params:{
            id:id
        }
      }).then(res =>{
        console.log(res.data)
      })
      location.reload()
    },
    searchBy(){
      let searchUrl = ''
      if(this.select == "1"){
        searchUrl = 'https://fitzone.work:8080/search_by_name'
      }
      else if(this.select == "2"){
        searchUrl = 'https://fitzone.work:8080/search_by_location'
      }
      else if(this.select == "3"){
        searchUrl = "https://fitzone.work:8080/search_by_time"
      }
      axios({
        method:'get',
        baseURL: searchUrl,
        params:{
          name:this.searchInput,
          location:this.searchInput,
          date:this.dateSelect,
          time:this.timeSelect,
        }
      }).then(res =>{
        console.log(res)
        console.log(this.searchInput)
        this.facility_list = res.data
      }).catch(err =>{
        console.log(err)
      }) 
      this.searchChartFlag = 1
    },
    changetype(type){
      if(type=="Class"){
        axios({
        method:'get',
        baseURL:'https://fitzone.work:8080/search_class',
        params:{
          type:0
        }
      }).then(res=>{
        this.facility_list=res.dat
      })
      }else{
        axios({
        method:'get',
        baseURL:'https://fitzone.work:8080/search_class',
        params:{
          type:1
        }
      }).then(res=>{
        this.facility_list=res.data
      })
      }
      
    },
    viewAll(){
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/all',
      }).then(res =>{
        console.log(res)
        this.facility_list = res.data
      })
      this.searchChartFlag = 0
    }
  }
  
};
</script>
